<template>
  <my-layout ref="my-layout" :tabbar-is-show="true" :tab-bar-index="4">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Body>
      <view :class="isIphoneX ? 'phoneX_contents' : 'contents'">
        <!--个人信息-->
        <view class="member_con">
          <view class="mb_header">
            <view class="mb_h_lef">
              <image src="@/static/images/morentx.png"></image>
              <view class="mb_h_lef_info">
                <text v-if="loginShow" class="h_info_name">{{
                  userinfo.phoneNumber
                }}</text>
                <button
                  v-else
                  class="h_info_name"
                  id="info_phone"
                  type="mini"
                  open-type="getPhoneNumber"
                  @getphonenumber="decryptPhoneNumber"
                >
                  登录
                </button>
                <text class="h_info_level">等级:村民</text>
              </view>
            </view>
            <view class="mb_h_rig">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/medal01.png"
              ></image>
              <text>村民</text>
            </view>
          </view>
          <!--卡包-->
          <view class="card_list">
            <view class="card_ans">
              <view>
                <text class="card_01">积分</text>
                <text class="card_02">348</text>
                <text class="card_03 color1">积分可进行体现兑换</text>
              </view>
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/fans4.png"
              ></image>
            </view>
            <view class="card_ans" @click="gokabaw()">
              <view>
                <text class="card_01">卡组</text>
                <text class="card_02">10</text>
                <text class="card_03 color2">部分卡组可叠加</text>
              </view>
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/fans3.png"
              ></image>
            </view>
          </view>
          <!--我的功能-->
          <view class="mb_more">
            <view class="mb_more_ans" @click="myorders(2)">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mb01.png"
              ></image>
              <text>待付款</text>
            </view>
            <view class="mb_more_ans" @click="myorders(3)">
              <image src="@/static/images/mb_zhifu.png"></image>
              <text>已支付</text>
            </view>
            <view class="mb_more_ans" @click="myorders(4)">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mb03.png"
              ></image>
              <text>已核销</text>
            </view>
            <view class="mb_more_ans" @click="myorders(1)">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mb04.png"
              ></image>
              <text>我的订单</text>
            </view>
          </view>
          <!--粉丝群-->
          <view class="fans">
            <view class="fans_tit"
              ><text>粉丝群</text>
              <view class="fans_line"></view>
            </view>
            <scroll-view
              scroll-x="true"
              class="fans_list"
              enhanced
              :show-scrollbar="false"
            >
              <view class="fans_l_ans fan_ans_style1" @click="goFans()">
                <view class="fans_l_ans_lan">
                  <image
                    src="http://llg.qiniu.comeinvip.com/images/zbs.png"
                  ></image>
                  <view class="fans_l_info">
                    <text class="f_info_01">赵本山粉丝群</text>
                    <text class="f_info_02">粉丝数：96w</text>
                    <text class="f_info_03">加入我们</text>
                  </view>
                </view>
              </view>
              <view class="fans_l_ans fan_ans_style2" @click="goFans()">
                <view class="fans_l_ans_lan">
                  <image src="@/static/images/group01.jpg"></image>
                  <view class="fans_l_info">
                    <text class="f_info_01">小沈阳粉丝群</text>
                    <text class="f_info_02">粉丝数：71w</text>
                    <text class="f_info_03">加入我们</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <!--设置功能-->
          <view class="mb_function">
            <view @click="goCollect()" class="mb_function_ans">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mf01.png"
              ></image>
              <text>收藏</text>
            </view>
            <view class="mb_function_ans">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mf02.png"
              ></image>
              <text>客服</text>
            </view>
            <view class="mb_function_ans">
              <image
                src="http://llg.qiniu.comeinvip.com/images/members/mf03.png"
              ></image>
              <text>设置</text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </my-layout>
</template>

<script>
import util from "@/utils/util.js";
import tabBar from "@/components/tabbar/tabbar.vue";
import navBar from "@/components/navbar/navbar.vue";
import configApi from "@/utils/config.js";
export default {
  components: {
    "tab-bar": tabBar,
    "nav-bar": navBar,
  },
  data() {
    return {
      // indexBackgroundImage:indexBackgroundImage,
      title: "Hello",
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 0, //是否显示左上角返回图标   1表示显示    0表示不显示
        positionShow: 0, //0不显示定位 1 显示定位
        backgroundCor: 3, //0 无背影色 1首页背景颜色   2白色 3有背景无定位
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
      },
      loginShow: false,
      userinfo: [],
    };
  },
  onShow() {
    //获取存储登录状态
    this.userinfo = uni.getStorageSync("userinfo");
    if (this.userinfo) {
      this.loginShow = true;
    }
  },
  methods: {
    /**
     * 发起登陆，获取微信 code
     * @returns {Promise<void>}
     * @private
     */
    async _uniLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success(res) {
            return resolve(res);
          },
          fail(error) {
            return reject(error);
          },
        });
      });
    },
    /**
     * 获取用户手机号进行登陆
     * @param event
     * @returns {Promise<void>}
     */
    async decryptPhoneNumber(event) {
      try {
        this.$refs["my-layout"].openLoading();
        let codeRes = await this._uniLogin();
        let tokenRes = await configApi.wxLoginCode({ code: codeRes.code });
        //保存公共参数
        uni.setStorageSync(
          tokenRes.header_key,
          `${tokenRes.token_type} ${tokenRes.token}`
        );
        let phoneRes = await configApi.getwxPhone(
          {
            iv: event.detail.iv,
            encryptedData: event.detail.encryptedData,
          },
          {
            header: {
              [tokenRes.header_key]: `${tokenRes.token_type} ${tokenRes.token}`,
            },
          }
        );
        if (phoneRes) {
          this.userinfo = phoneRes;
          //保存登录信息
          uni.setStorageSync("userinfo", phoneRes);
          //修改当前页昵称
          this.loginShow = true;
          this.$refs["my-layout"].closeLoading();
          uni.showToast({
            title: "登录成功",
            icon: "none",
          });
        }
      } catch (error) {
        this.$refs["my-layout"].closeLoading();
        uni.showToast({
          title: "登录失败",
          icon: "error",
        });
      }
    },
    //跳转订单
    myorders(navindex) {
      uni.navigateTo({
        url: "/pages/members/orders/orders?navindex=" + navindex,
      });
    },
    //收藏
    goCollect() {
      uni.navigateTo({
        url: "/pages/members/collect/collect",
      });
    },
    //卡包
    gokabaw() {
      uni.navigateTo({
        url: "/pages/members/kabaws/kabaws",
      });
    },
    //跳转粉丝群
    goFans() {
      uni.navigateTo({
        url: "/pages/others/funsGrounp/funsGrounp",
      });
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
};
</script>

<style>
@import url(@/static/css/index.css);
@import url(@/static/css/member.css);

#info_phone {
  border: none;
  background: transparent;
  font-size: 20rpx;
  outline: none;
  /* margin: 0;
		padding: 0; */
}
</style>
